{% extends 'layout.html' %}
{% block content %}
    <h5 class="font-weight-bold">Containers</h5>
    <div class="border-top pt-3"></div>
    <!--Top Action Buttons-->
    <button type="button" class="btn btn-info btn-sm float-right m-1">Add Container</button>
    <button type="button" class="btn btn-danger btn-sm float-right m-1">Remove All</button>
    <button type="button" class="btn btn-secondary btn-sm m1-">
        Containers <span class="badge badge-light">{{ container_count }}</span>
        <span class="sr-only">unread messages</span>
    </button>
    <a href="{{ url_for('containers') }}">
        <button type="button" class="btn btn-warning btn-sm m-1"><span class="fas fa-refresh mb-1"></span> Refresh
        </button>
    </a>

    <!--Table Start-->
    <table class="table table-sm mt-4">
        <thead class="thead-light">
        <tr>
            <th scope="col">Names</th>
            <th scope="col">Container Id</th>
            <th scope="col">Image</th>
            <th scope="col">Command</th>
            <th scope="col">Created</th>
            <th scope="col">Ports</th>
            <th scope="col">Status</th>
            <th scope="col">Action</th>
            <th scope="col">Details</th>
        </tr>
        </thead>
        <tbody>
        {% if container_count > 0 %}
            {% for i in docker_container %}
                <tr>
                    <td>{{ i['Names'][0].strip('/') }}</td>
                    <td>{{ i['Id'][:12] }}</td>
                    <td>{{ i['Image'] }}</td>
                    <td>{{ i['Command'] }}</td>
                    <td>{{ i['Created'] }}</td>
                    {% if i['Ports'] | length < 1 %}
                        <td>-</td>
                    {% else %}
                        <td>{{ i['Ports'] }}</td>
                    {% endif %}
                    {% if  i['State'] | string() == "exited" %}
                        <td><span class="badge badge-danger">Stopped</span></td>
                    {% else %}
                        <td><span class="badge badge-success">Running</span></td>
                    {% endif %}
                    <td>
                        <div class="dropdown">
                            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
                                Action
                            </button>
                            <div class="dropdown-menu">
                                <small><a class="dropdown-item" href="#">Stop</a></small>
                                <small><a class="dropdown-item" href="#">Start</a></small>
                                <small><a class="dropdown-item" href="#">Delete</a></small>
                            </div>
                        </div>
                    </td>
                    <td><a href="#">View</a></td>
                </tr>
            {% endfor %}
        {% else %}
            <tr>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
        {% endif %}
        </tbody>
    </table>
    <div class="border-top pt-3"></div>
{% endblock content %}